<template>
    <div class="exam-box">
        <div class="exam-detail">
            <div class="detail-m1">
                <div class="m1-top">
                    <div class="divider"></div>答题卡
                </div>
                <div class="m1-center">
                    <div v-for="(item, index) in examData" :key="item.questionId">
                        <div class="m1-title">{{ item.typeName }}
                            (共<span class="head-num">{{ item.ques.length }}</span>题，合计<span class="head-num">{{
                                getQuesScore(item.ques) }}</span>.0分)
                        </div>
                        <div class="left-btns">
                            <button v-for="(item2, index2) in item.ques" :key="item2.questionId"
                                class="content-left-btn" @click="scrollToQuestion(item2.questionId)">{{ index2 + 1
                                }}</button>
                        </div>
                    </div>
                </div>
                <div class="m1-foot">
                    <span class="foot-option"><button class="btn1"></button>未答</span>
                    <span class="foot-option"><button class="btn2"></button>正确</span>
                    <span class="foot-option"><button class="btn3"></button>错误</span>
                </div>
            </div>
            <div class="detail-m2">
                <div class="m2-box" v-for="(item, index) in examData" :key="item.questionId">
                    <div class="m2-top">
                        <div class="m2-title"><span v-text="numToChina(index)" class="index-num"></span>{{
                            item.typeName }}
                            (共<span class="head-num">{{ item.ques.length }}</span>题，合计<span class="head-num">{{
                                getQuesScore(item.ques) }}</span>.0分)
                        </div>
                    </div>
                    <div class="m2-body">
                        <div class="questions" v-for="(question, index2) in item.ques" :key="question.questionId"
                            :id="question.questionId">
                            <div class="head">
                                <span class="question-num">{{ index2 + 1 }}.</span>
                                <span class="question-title">{{ question.questionTitle }}</span>
                            </div>
                            <transition name="fade-slide" mode="out-in" appear>
                                <keep-alive>
                                    <component :is="getComponent(question.questionType, question.isSingleSelect)"
                                        :key="question.questionId" class="component" :questionId="question.questionId">
                                    </component>
                                </keep-alive>
                            </transition>
                        </div>
                    </div>
                </div>
            </div>
            <div class="detail-m3">
                <div>
                    <div class="m3-word">剩余时间</div>
                    <div class="m3-time">{{ time }}</div>
                </div>
            </div>
            <div class="m4-box">
                    <el-button type="primary" @click="toBack"><i class="iconfont icon-fanhui"></i>返回</el-button>
                </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { selectExamPaperAPI } from '@/api/api'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus';
import singleChoice from "@/views/amjViews/questionType/singleChoice.vue"
import multipleChoice from "@/views/amjViews/questionType/multipleChoice.vue"
import fill from "@/views/amjViews/questionType/fill.vue"
import judge from "@/views/amjViews/questionType/judge.vue"
import answer from "@/views/amjViews/questionType/answer.vue"
import material from "@/views/amjViews/questionType/material.vue"

const router = useRouter()
const route = useRoute()
const examData = ref()

//结束时间
const targetDate = new Date('April 15, 2024 19:25:00').getTime();
//开始时间  
// const currentTime = ref(new Date().getTime());  //正式
const currentTime = new Date('April 15, 2024 18:25:00').getTime();   //测试
//剩余时间
// const timeRemaining = ref(targetDate - currentTime.value);
const timeRemaining = ref(targetDate - currentTime);

//组件题型
const originQuestionType = {
    "1": fill,
    "2": judge,
    "3": answer,
    "4": material,
}
//获取题型组件
const getComponent = (type, isSingleSelect) => {
    if (type == 0) {
        if (isSingleSelect == 1) {
            return multipleChoice
        } else {
            return singleChoice
        }
    }
    else {
        return originQuestionType[type]
    }
}

onMounted(() => {
    //获取试卷详情
    selectExamPaper(route.query.epId)
    //时间
    // setInterval(() => {
    //     currentTime.value = new Date().getTime();
    //     timeRemaining.value = targetDate - currentTime.value;
    // }, 1000);
})

//倒计时
const time = computed(() => {
    var s;
    const hours = parseInt((timeRemaining.value % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = parseInt((timeRemaining.value % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = (timeRemaining.value % (1000 * 60)) / 1000;
    s = (hours < 10 ? ('0' + hours) : hours) + ':' + (minutes < 10 ? ('0' + minutes) : minutes) + ':' + (seconds < 10 ? ('0' + seconds) : seconds);
    if (s.length > 8) {
        s = s.slice(0, 8)
    }
    return s;
})
//数字转中文
const numToChina = (index) => {
    if (index == 0) {
        return "一、"
    } else if (index == 1) {
        return "二、"
    } else if (index == 2) {
        return "三、"
    } else if (index == 3) {
        return "四、"
    } else if (index == 4) {
        return "五、"
    } else if (index == 5) {
        return "六、"
    } else if (index == 6) {
        return "七"
    }
}
//锚点滚动
const scrollToQuestion = (id) => {
    console.log(id);
    const element1 = document.getElementById(id);

    console.log(element1, 'element1');
    element1.scrollIntoView({
        behavior: "smooth", //smooth:平滑，auto：直接定位
        block: "center",
        inline: "center",
    });
}
//根据试卷id查询试卷
const selectExamPaper = async (epId) => {
    await selectExamPaperAPI(epId).then(res => {
        examData.value = res.data.data.questions
    })
}
//求该题型总分
const getQuesScore = (arr) => {
    let sum = 0
    arr.forEach(element => {
        if (element.score) {
            sum += parseInt(element.score)
        }
    });
    return sum
}
const toBack = ()=>{
  router.back();
}

</script>

<style lang="less" scoped>
.exam-box {
    min-height: 100%;

    .exam-detail {
        background-color: #f1f3f8;
        min-height: calc(100vh - 85px);
        display: flex;
        padding: 0px 80px 0 110px;


        .detail-m1 {
            background-color: #fff;
            width: 18%;
            margin-right: 20px;
            padding: 20px 0;

            .m1-top {
                font-size: 17px;
                font-weight: 550;
                color: rgb(29, 23, 76);
                margin: 0 10px 5px 15px;
                padding-left: 10px;
                border-left: 5px solid #409eff;
            }

            .m1-center {
                padding: 20px 15px;
                min-height: calc(100vh - 32vh);

                .center-options {
                    padding: 5px 0px;
                }

                .m1-title {
                    margin-bottom: 8px;
                }

                .left-btns {
                    display: flex;
                    flex-wrap: wrap;
                    width: 230px;

                    .content-left-btn {
                        background-color: #fff;
                        border: 1px solid #e3e3e3;
                        color: #908f8f;
                        width: 28px;
                        height: 28px;
                        margin: 5px 10px 5px 0;
                    }

                    .content-left-btn:hover {
                        background-color: #e5eaf3;
                    }
                }
            }

            .m1-foot {
                box-shadow: 0 -5px 8px rgba(0, 0, 0, 0.1);
                padding: 15px 20px 0px 10px;
                font-size: 13px;
                display: flex;
                justify-content: end;

                .foot-option {
                    padding: 0 2px;

                    button {
                        width: 13px;
                        height: 13px;
                        border: none;
                        padding: 2px;
                        margin: 0 5px;
                    }

                    .btn2 {
                        background-color: blue;
                    }

                    .btn3 {
                        background-color: red;
                    }
                }

            }
        }

        .detail-m2 {
            width: 65%;
            background-color: #fff;
            margin-right: 20px;
            max-height: calc(100vh - 85px);
            overflow-y: scroll;

            .m2-box {
                margin-bottom: 30px;

                .m2-top {
                    height: 20px;
                    background-color: #f7f7f7;
                    padding: 20px;
                    font-size: 18px;
                }

                .m2-body {
                    padding: 20px;

                    .questions {
                        padding: 20px 0;

                        .head {
                            margin-bottom: 10px;

                            .question-num {
                                color: #409eff;
                                font-size: 16px;
                                margin: 0 10px;
                            }

                            .question-title {
                                font-size: 16px;
                            }
                        }

                    }
                }
            }
        }

        .detail-m3 {
            background-color: #fff;
            width: 13%;
            margin-right: 20px;
            max-height: calc(100vh - 60vh);
            text-align: center;

            .m3-word {
                font-size: 14px;
                font-weight: 550;
                color: grey;
                margin-top: 15px;
            }

            .m3-time {
                font-size: large;
                font-weight: 550;
                color: red;
                margin-top: 15px;
            }

        }
        .m4-box {
            display: flex;
            flex-flow: column;
            justify-content: end;
            margin-left: -12vw;
            .el-button{
                width: 100px;
                height: 40px;
                .icon-fanhui{
                    margin-right: 5px ;
                    margin-top: -5px;
                }
            }
        }

    }
}
</style>